@import './variable_list.less';

/* import fonts */
@import './font_awesome.min.less';

*{
	box-sizing: border-box;

	/* 
	&::-webkit-scrollbar {
		width: 8px;
	}

	&::-webkit-scrollbar-track-piece {
		border-radius: 4px;
		box-shadow: inset -1px -1px 1px @shadowColor,inset -1px 1px 1px @shadowColor,inset 1px -1px 1px @shadowColor,inset 1px 1px 1px @shadowColor;
	}

	&::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 4px;
	} */
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
	/*
	min-width: 768px;
	overflow-x: auto;
	*/
	background-color: #f5f5f5;
	font-family: "Inconsolata"
}

a{
	text-decoration: none;
}

/* header */
body > header {
	align-items: center;
	justify-content: space-between;
	display: flex;
	height: @headerHeight;
	width: 100%;
	background-color: @headerBGColor;

	> a{
		margin-right: 15px;
		color: #fff;
		background-color: transparent;
		border: 0;
		outline: none;

		&:hover{
			cursor: pointer;
		}
	}
}

header > div{
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 0;
}

header > div > a {
	display: inline-block;
	width: @leftSideBarWidth;
	text-align: center;
	font-size: 24px;
	line-height:30px;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	color: #fff;
	background-color: #007d71;
	height: 100%;
	text-decoration: none;
	line-height: @headerHeight;
}

header > div > button{
	width: @headerHeight;
	padding: 0;
	display: inline-flex;
	height: 100%;
	justify-content: center;
	color: #fff;
	border: 0;
	background-color: transparent;
	outline: none;
}

header > div > button:hover{
	cursor: pointer;
	background-color: @logoBGColor;
}


/* left side-bar */
@import './side_bar.less';

/* main-content-wrap */
#wrap {
	height: calc(~"100vh - @{headerHeight}");
	padding: 10px;
	background-color: #f5f5f5;
	overflow-y: auto;
	
	> div {
		min-height: calc(~"100% - 45px");
		box-shadow: -1px -1px 1px @shadowColor,-1px 1px 1px @shadowColor,1px -1px 1px @shadowColor,1px 1px 1px @shadowColor;
	}

	> footer {
		box-shadow: -1px -1px 1px @shadowColor,-1px 1px 1px @shadowColor,1px -1px 1px @shadowColor,1px 1px 1px @shadowColor;
		height: 35px;
		margin-top:10px;
		line-height: 35px;
		text-align: center;
		background-color: #f5f5f5;
		font-size: 14px;
		color: #666;

		> a {
			text-decoration: none;
			color: #606060;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

